<script setup>
import { ref, reactive, onMounted, computed, onUnmounted, watch, onUpdated } from "vue";
import LinMusicTop from "../components/music/LinMusicTop.vue";
import LinMusicLyric from "../components/music/LinMusicLyric.vue";
import LinMusicPostre from "../components/music/LinMusicPostre.vue";

// 当前音乐url
const musicUrl = ref("/music/myndy.mp3");

const isPlay = ref(false)

// 媒体播放器
const audioRef = ref(null)


// 当点击播放按钮时，改变播放状态
const onClickPlay = (e) => {
  isPlay.value = e
  if (isPlay.value) {
    audioRef.value.play()
    onPlayOffBar()
  } else {
    audioRef.value.pause()
  }
}


// 当切换歌曲时，改变播放状态
const onChangeSong = (url) => {
  isPlay.value = !isPlay.value
  musicUrl.value = url
  if (isPlay.value) {
    audioRef.value.play()

  } else {
    audioRef.value.pause()
  }
}
// 下一首
const onClickNext = (nextUrl) => {
  console.log("下一首")
}
// 上一首
const onClickPrev = (prevUlr) => {
  console.log("上一首")
}
// 进度条相关
// 数据
let musicData = reactive({
  name: '没有你的夜',
  singer: '夏晚安',
  url: '',
  // 持续时长
  totalTime: 197000,
  // 当前时长
  step: 0
})

// 当播放音乐时，随之增长
const onPlayOffBar = () => {
  if (!isPlay.value) return
  let timer = setTimeout(() => {
    if ( musicData.step >= musicData.totalTime) {
      musicData.step = 0
      // audioRef.value.pause()
      isPlay.value = false
      clearTimeout(timer)
      return
    }
    musicData.step += 100
    onPlayOffBar()
  }, 100)

}
// 当播放结束时，重置进度条




const onChangeProgress = (e) => {
  console.log(e)
}
onMounted(() => {
  isPlay.value = audioRef.value.paused
  onPlayOffBar()

})

computed(() => {

})
onUnmounted(() => {

})
</script>

<template>
  <div>
    <div class="music-box">
      <audio src="/music/myndy.mp3" controls autoplay ref="audioRef"></audio>
      <div class="bkg">
        <img src="/images/myndy.jpg" alt="">
      </div>
      <!-- 音乐页面正文开始 -->
      <div class="music">
        <!-- 顶部播放栏 -->
        <LinMusicTop @playMusic="onClickPlay" :isPlay="isPlay" :data="musicData" @nextMusic="onClickNext"
          @prevMusic="onClickPrev" @progressChange="onChangeProgress">
        </LinMusicTop>
        <!-- 展示部分 -->
        <div class="content">
          <!-- 歌词 -->
          <LinMusicLyric :isPlay="isPlay" :currentTime="musicData.step" :duration="musicData.totalTime"></LinMusicLyric>
          <!-- 海报，碟片 -->
          <LinMusicPostre @playMusic="onClickPlay" :isPlay="isPlay"></LinMusicPostre>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
/*正式样式开始---------------------------------------------- */
.music-box {
  width: 100%;
  height: 100vh;
  position: relative;

  .bkg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;

    // 模糊背景
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: blur(5px);
    }
  }

  .music {
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;



    .content {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      justify-content: center;
      align-items: center;
      perspective: 600px;


    }
  }
}
</style>